<template>
  <div>
    <div class="operator">
      <a-button
        v-for="btn in operationBtns.filter(item=>{return item.pos=='top' && (item.perm ? hasPerm(item.perm) : true)})"
        :key="btn.key"
        :type="btn.type ? btn.type : 'default'"
        :style="{marginLeft:'8px'}"
        @click="operationHandel(null, btn.key)"
      >{{btn.label}}</a-button>
    </div>
    <a-table :columns="columns" bordered :data-source="data" rowKey="id" :loading="loading" :pagination="false">
      <template slot="action" slot-scope="record">
        <span
          v-for="(btn,index) in operationBtns.filter(item=>{return item.pos!='top' && (item.perm ? hasPerm(item.perm) : true) && (item.conditions ? hasDisplay(record, item.conditions) : true)})"
          :key="btn.key" >
          <a-divider v-if="index!=0" type="vertical" />
          <a @click="operationHandel(record,btn.key)">{{btn.label}}</a>
        </span>
      </template>
    </a-table>
  </div>
</template>
<script>
import moment from "moment"; // 这个moment方法。框架里本来就有引入就好

export default {
  props: {
    operationBtns: {
      type: Array,
      default: () => []
    },
    tableCols: {
      required: true,
      type: Array
    },
    tableDatas: {
      type: Array,
      default: () => []
    },
    selectOptionDatas: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    tableDatas: function (val) {
      this.data = val;
    },
  },
  data() {
    return {
      columns: [],
      data: this.tableDatas,
      loading: false
    };
  },
  created() {
    this.tableCols.forEach(item => {
      var column = { ...{}, ...item };
      if (item.type == "select") {
        column["customRender"] = val => {
          return this.formatter(val, item.dataIndex);
        };
      } else if (item.type == "dateTime") {
        column["customRender"] = val => {
          return this.formatterTime(val);
        };
      } else if (item.type == "image"){
        column["customRender"] = val => {
          // return <img src={ val } style="width:100px" />;
          return <a-avatar shape="square" size={ 72 } src={ val } icon="file-image" />;
        };
      }
      this.columns.push(column);
    });
    //处理操作列
    var length = this.operationBtns.filter(item=>{return item.pos!='top'}).length;
    if(length > 0){
    var width = length * 80;
    if (width > 250) width = 250;
      this.columns.push({
        title: "操作",
        key: "action",
        width: width,
        scopedSlots: { customRender: "action" },
      });
    }
  },
  methods: {
    formatterTime(val) {
      var type = typeof val;
      if(type === "number"){
        val.toString().length < 13 ? val *= 1000 : val
      }
      return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : "";
    },
    formatter(val, key) {
      var data = this.selectOptionDatas[key].find(item => {
        return item.value == val;
      });
      return data ? data.label : "-";
    },
    operationHandel(record, key) {
      this.$emit("operationHandel", record, key);
    },
    hasDisplay(data, conditions){
      var yesCount = conditions.length;
      var count = 0;
      conditions.forEach((condition)=>{
        if(data[condition.key] === condition.value){
          count++
        }
      })
      return count>=yesCount;
    }
  }
};
</script>
<style scoped>
.operator {
  margin-bottom: 18px;
}
</style>